<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <link rel="stylesheet" href="css/font.css">
  <style>
    a{
      text-decoration: none;
      color:#212121;
      margin: 0;
    }
    /*最后删除*/
    /*div{
      height: 600px;
      border: 1px solid red;
    }*/
    #main_p1,#main_p2{
      text-align:center;
    }
    #main_p2{
      margin-top: 16px;
    }
    #main_p1 a{
      font-size: 36px;
      font-weight: bold;

      line-height:56px;
      font-family: "Microsoft YaHei",\5FAE\8F6F\96C5\9ED1;
    }
    #main_p2 a{
      font-size: 12px;
      color:#949494;
      line-height:22px;
      margin: 0 5px;
    }
    ul{
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #t_r_1 p{
      font-size: 22px;
      font-family: "Microsoft YaHei",\5FAE\8F6F\96C5\9ED1;
      font-weight: bold;
      margin: 0;
      padding: 0;
    }
    #t_r_1 li{
      font-size: 18px;
      margin-top: 15px;
    }
    #t_r_1 a:hover{
      color:#c00;
    }

    /*改造原EUI样式*/
  .el-carousel i{
    position: absolute;
    bottom:-230px;
    transform: scale(2.3);

  }
  .el-carousel-p{
    width: 100%;
    font-size: 21px;
    color:#fff;
    line-height:80px;
    background-color:rgba(0,0,0,0.5);

    position: absolute;
    bottom: -20px;
    text-align: center;
  }


  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!--<el-header style="width: 100%;height:165px;background-color: #e60012;">
      <a href="">
        <img src="http://www.people.cn/img/2020peopleindex/img/t_logo1.png" alt="">
      </a>
      <a href="">
        <img src="http://www.people.cn/img/2020peopleindex/img/database.png" alt="">
      </a>
      <a href="">
        <img src="http://www.people.cn/img/2020peopleindex/img/xjp.png" alt="">
      </a>
    </el-header>-->
    <el-main style="width: 1280px;margin: 0 auto;">
      <p id="main_p1">
        <b>
          <a href="" style="">习近平同巴西总统卢拉举行会谈</a>
        </b>
      </p>
      <p id="main_p2">
        <a href="">
          习近平举行仪式欢迎巴西总统访华
        </a>
        <a href="">
          习近平：健康稳定的中巴关系将为世界发挥积极而重要的作用
        </a>
        <a href="">
          习近平引领中巴关系迈向更高水平
        </a>
        <a href="">
          中巴关于深化全面战略伙伴关系的联合声明
        </a>
      </p>
      <el-row gutter="40">
        <el-col span="16">
          <template>
            <el-carousel arrow="always" indicator-position="none" height="567px">
              <el-carousel-item v-for="(img,i) in indexInmage" >
                <a href="">
                  <img :src="img.imgUrl" alt="">
<!--
                  <label style="position: absolute;left: 50px;">{{i+1}}/8</label>
-->
                  <p class="el-carousel-p">
                    {{img.title}}</p>
                </a>
                </el-carousel-item>
            </el-carousel>
          </template>
        </el-col>
        <el-col id="t_r_1" span="8">
          <div>
            <p><a href="">习近平考察广东纪实 反响 春到岭南</a></p>
            <ul>
              <li><a href="">习近平这样推动筑牢国家安全人民防线 评 图解</a></li>
              <li><a href="">李强主持国常会 研究优化调整稳就业政策措施</a></li>
              <li><a href="">赵乐际主持召开人大常委会第二次委员长会议</a></li>
              <li><a href="">韩正会见德国外长贝尔伯克</a></li>
              <li><a href="">《关于上市公司独立董事制度改革的意见》解读</a></li>
            </ul>
          </div>
          <img height="36px" src="http://www.people.com.cn/img/2020peopleindex/img/azq/esd_tit1107.png" alt="">
          <div style="margin-top: 15px">
            <p><a href=""><img height="32px" src="http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304150608031508913067544.jpg" alt=""></a></p>
            <ul>
              <li><a href="">网评:五个一百,点点星火汇聚中国发展正能量</a></li>
              <li><a href="">开局平稳逐月向好 我国外贸向好势头有望延续</a></li>
              <li><a href="">天津：到2025年国家卫生区镇100%创建</a></li>
              <li><a href="">天津市人民政府2023年度立法计划出台</a></li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="24">3</el-col>
      </el-row>
      <el-row gutter="20">
        <el-col span="6">4</el-col>
        <el-col span="6">5</el-col>
        <el-col span="6">6</el-col>
        <el-col span="6">7</el-col>
      </el-row>
    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        indexInmage:[
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0414/MAIN202304142306258782816338563.jpg",
            title:"习近平同巴西总统卢拉举行会谈"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304151105361656259316071.JPG",
            title:"安全教育进校园"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304151105359375904225019.JPG",
            title:"万桥飞架，沿着高速看贵州交通高质量发展"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304151105365158084884096.JPG",
            title:"中越海警开展2023年第一次北部湾海域联合巡逻"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304150000359788920056027.jpg",
            title:"江西举行高校科技成果对接会"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304151105372208449927963.jpg",
            title:"云南西双版纳：民间民族文化游演庆祝傣历新年"},
          {imgUrl:"http://www.people.com.cn/NMediaFile/2023/0415/MAIN202304151105368723663289505.jpg",
            title:"重庆：点亮夜经济 释放新活力"},
          {imgUrl:"http://www.people.com.cn/adv/pgg/people/2023/04/3680_1_16812899670544.jpg",
            title:"“薪火”非物质文化遗产保护与传承论坛开启"}
         ]
      }
    },
   methods:{

   }
  })
</script>
</html>